// https://github.com/arackaf/customize-cra#with-mobx
const path = require("path");
const webpackMerge = require("webpack-merge");
const appSrc = path.join(__dirname, "./src");
const {
  addDecoratorsLegacy,
  disableEsLint,
  useBabelRc,
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias
} = require("customize-cra");
const utilsConfig = require("./src/utils/config");
//打包分析
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

// 这里可以直接修改 Host 或者 Port
// process.env.HOST = 'localhost.xxxx.com';
// process.env.PORT = 4100;

// 生产环境是否打包 Source Map
process.env.GENERATE_SOURCEMAP = false;

module.exports = {
  // 配置devServer
  devServer: configFun => (proxy, allowedHost) => {
    proxy = {
      "/mock": {
        // 这里配置代理服务地址
        target: "http://localhost:3000/",
        changeOrigin: true,
        pathRewrite: {"^/mock": ""}
      }
    };
    // allowedHost： 添加额外的地址
    const config = configFun(proxy, allowedHost);
    config.quiet = false;
    return config;
  },

  // 配置webpack
  webpack: (config, env) => {
    // 开发环境
    const isEnvDevelopment = env === "development";
    // 生产环境
    const isEnvProduction = env === "production";

    // 通过customize-cra插件覆盖
    config = override(
      // 配置路径别名
      addWebpackAlias({"@": appSrc}),
      // 对Decorators支持
      addDecoratorsLegacy(),
      disableEsLint(),
      useBabelRc(),
      fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true // change importing css to less
      }),
      addLessLoader({
        javascriptEnabled: true,
        modifyVars: utilsConfig.lessModifyVars
      })
    )(config, env);

    return webpackMerge(config, {
      // 用户可以在这里添加自定义的config配置 来增加修改loader, plugin, optimization
      plugins: [new BundleAnalyzerPlugin()],
      optimization: {
        splitChunks: {
          chunks: "async", // 默认作用于异步chunk，值为 all/initial/async/function(chunk)
          minSize: 30000, // 表示在压缩前的最小模块大小,默认值是30kb
          minChunks: 1, // 表示被引用次数，默认为1；
          maxAsyncRequests: 5, // 所有异步请求不得超过5个
          maxInitialRequests: 3, // 初始话并行请求不得超过3个
          automaticNameDelimiter: "~", // 名称分隔符，默认是~
          name: true, // 打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
          cacheGroups: {
            // 设置缓存组用来抽取满足不同规则的chunk
            vendor: {
              name: "vendor",
              chunks: "initial", // 同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
              priority: 10, // 优先级
              reuseExistingChunk: false, // 如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
              test: /node_modules\/(.*)\.js/ // 以module为维度进行抽取
            },
            styles: {
              name: "styles",
              test: /\.(scss|css)$/,
              chunks: "all",
              minChunks: 20,
              reuseExistingChunk: true,
              enforce: true
            }
          }
        }
      }
    });
  },

  // 配置测试
  jest: config => {
    config.moduleNameMapper = {
      // 同webpack一样配置别名
      "@/(.*)$": "<rootDir>/src/$1"
    };
    return config;
  }
};
